import { request} from '../../request/index'
Page({
  data: {
     //父组件定义数据
     tabs:[
       {
         id:0,
         value:"综合",
         isActive:true
       },
       {
        id:1,
        value:"价格",
        isActive:false
      },
      {
        id:2,
        value:"销量",
        isActive:false
      }
     ],
     //商品列表数组
     goodsList:[],
  },  
  //请求接口要传的参数
  QueryParams:{
    query:"",
    cid:"",
    pagenum:1,
    pagesize:10
  },
  //总页数
  totalPages:1,

  //生命周期函数--监听页面加载
  onLoad: function (options) {
    //  console.log(options);
     this.QueryParams.cid = options.cid || "";   //点击商品传过来的cid赋值上面请求参数cid
     this.QueryParams.query = options.query || "";   //点击首页商品跳转列表带query参数发起请求
     this.getGoodsList()
  },

  //获取商品列表数据
  async getGoodsList(){
     let res = await request({
       url:"/goods/search",
       data:this.QueryParams,
     });
     //获取总条数
     const total = res.total;
     //计算总页数
     this.totalPages = Math.ceil( total / this.QueryParams.pagesize);
     this.setData({
      // goodsList:res.goods   //数据赋值
      // 拼接数组
       goodsList:[...this.data.goodsList,...res.goods] //第一次进来的数据拼接后面滚动触发的数据
     });
     //关闭下拉刷新的窗口，如果没有调用下拉刷新的窗口，直接关闭不会报错
     wx.stopPullDownRefresh();
  },

  //标题点击事件 从子组件传过来的
  handleTabsItemChange(e){
    // 1. 获取被点击的标题索引
    const {index} = e.detail
    // 2.修改源数组
    const {tabs} = this.data
    tabs.forEach((v,i)=> i=== index ? v.isActive = true : v.isActive = false);
    // tabs.forEach((v, i )=>{
    //    if (i === index) {
    //       v.isActive = true
    //    }else{
    //      v.isActive = false
    //    }
    // })
    // 3.赋值回到data中
    this.setData({
      tabs
    })
  },
  
  /*
   一： 用户上滑页面 滚动条触底了，开始加载下一页数据
    1. 找到滚动条触底事件  (wx开发文档)
    2. 判断是否还有下一页数据
       2.1 获取总页数  只有总条数total
           总页数 = Math.ceil( 总条数 / 页容量pagesize )  ceil()向上取整
       2.2 获取当前的页码  pagenum
       2.3 判断 当前的页码 是否大于或等于 总页数
           2.3.1  是 就没有下一页
           2.3.2  否 加载下一页数据
    3. 假如没有下一页数据，弹出提示
    4. 如果有下一页，就加载下一页数据
         4.1 当前的页码++，重新发送请求
             数据请求回来 要对data中的数组 进行 拼接 而不是全部替换之前的数据!
  二： 下拉刷新页面
       1.触发下拉刷新事件  需要在页面的json文件中开启一个配置项
          1.1添加逻辑代码
       2.重置 数据 数组
       3.重置页码 设置为1
       4.重新发送请求, 数据回来了需要手动关闭刷新等待效果
  */
   
   //页面上滑，滚动条触底事件
   onReachBottom(){
     //判断是否还有下一页数据
     if (this.QueryParams.pagenum>=this.totalPages) {
       //没有下一页数据
       wx.showToast({
        title: '我也是有底线的',
        icon: 'success',
      })
     }else{
       //还有下一页数据
       this.QueryParams.pagenum++;
       this.getGoodsList()
     }
   },

   //下拉刷新事件
   onPullDownRefresh(){
      //重置数据
      this.setData({
        goodsList:[]
      });
      //重置页码设置为1
      this.QueryParams.pagenum = 1;
      //重新发送请求
      this.getGoodsList()
   }

})